<template>
  <div class="body" v-loading="loading.status">
    <div class="table_content">
      <div class="table_filtrate">
        <div class="tf_item" style="margin-right: 30px">
          <div class="tag">搜索</div>
          <el-input
            class="input_fuzzy_search input"
            size="mini"
            placeholder="名字|手机号"
            v-model="tableParams.fuzzy_search"
            clearable
          >
          </el-input>
        </div>

        <div class="tf_item">
          <el-button @click="loadTableData" type="primary" plain size="mini"
            >搜索</el-button
          >
        </div>
      </div>

      <div class="table_operate">
        <el-button
          class="btn_add"
          type="primary"
          size="mini"
          @click="handleDialogFormOpen"
          >添加</el-button
        >
      </div>

      <div class="table-card">

        <p style="color: #8f8f8f;font-size: 14px;margin-bottom: 24px;">只要符合其中一项，则会算入黑名单。</p>

        <el-table
          class="table"
          :data="tableData.data"
          :row-class-name="tableRowClassName"
          size="mini"
          v-loading="loading.table"
        >
          <el-table-column prop="id" label="ID" width="60"> </el-table-column>
          <el-table-column prop="name" label="名字"> </el-table-column>
          <el-table-column prop="mobile" label="手机号"> </el-table-column>
          <el-table-column prop="identity" label="身份证"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-link
                class="handle"
                type="primary"
                @click="handleTableEdit(scope.$index, scope.row)"
                >编辑</el-link
              >
              <el-link
                class="handle"
                type="danger"
                @click="handleTableDelete(scope.$index, scope.row)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          class="table_pagination"
          @size-change="handleTableSizeChange"
          @current-change="handleTableCurrentChange"
          :current-page="currentPage4"
          :page-sizes="$pageSize"
          :page-size="tableParams.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="添加"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="form">
        <el-form-item label="名字" :label-width="fromViewCofing.label_width">
          <el-input
            class="input"
            v-model="form.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="fromViewCofing.label_width">
          <el-input
            class="input"
            v-model="form.mobile"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证" :label-width="fromViewCofing.label_width">
          <el-input
            class="input"
            v-model="form.identity"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDialogFormClose()">取 消</el-button>
        <el-button type="primary" @click="handleFormSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  apiBlacklistListpage,
  apiBlacklistCreate,
  apiBlacklistDelete,
} from "@/api/apiBlacklist";
import { paramsDeleteNull } from "@/utils/common";
export default {
  name: "Index",
  data() {
    return {
      tableParams: {
        page: 1,
        size: 15,
        fuzzy_search: "",
      },
      tableData: {
        current_page: 1,
        data: [],
        last_page: 1,
        per_page: "15",
        total: 0,
      },
      currentPage4: 1,
      business_select: [],
      organization_select: [],
      fromViewCofing: {
        input_width: "120px",
        label_width: "120px",
      },
      loading: {
        dialog_create: false,
        table: false,
        form: false,
      },
      dialogFormVisible: false,
      init_form: {
        id: 0,
        name: "",
        mobile: "",
        identity: "",
      },
      form: {},
    };
  },
  created() {
    this.initForm();
    this.loadTableData();
  },
  methods: {
    // 初始化表单
    initForm() {
      this.form = this.init_form;
    },
    // 列表请求
    loadTableData() {
      const _this = this;
      _this.loading_start("table");
      this;
      var tableParamsData = { ..._this.tableParams };
      tableParamsData = paramsDeleteNull(tableParamsData, "fuzzy_search");
      apiBlacklistListpage(tableParamsData)
        .then((response) => {
          const result = response;
          _this.tableData = result.data.datalist;
          _this.loading_end("table");
          this;
        })
        .catch(function (result) {
          _this.loading_end("table");
          this;
        });
    },
    // 获取机构列表
    reqApiOrganization(business_uid) {
      const _this = this;
      _this.loading_start("table");
      this;
      apiOrganizationSelects({
        page: 1,
        size: 99,
        business_uid: business_uid,
      }).then((response) => {
        const result = response.data;
        _this.organization_select = result.selects;
        _this.loading_end("table");
        this;
      });
    },
    //切换商务人员
    changeSelectBusinessuid(business_uid) {
      this.tableParams.o_id = "";
      this.reqApiOrganization(business_uid);
    },
    // 页面跳转
    handleToGoCreate() {
      this.$router.push({ path: "/product/create", query: { id: 0 } });
    },
    // 表格行状态
    tableRowClassName({ row, rowIndex }) {
      if (row["status"] == "stop") {
        return "discard-row";
      }
    },
    // 表格操作
    handleTableEdit(index, row) {
      console.log(row, "rowrowrow");
      this.form = {
        id: row.id,
        name: row.name,
        mobile: row.mobile,
        identity: row.identity,
      };
      this.handleDialogFormOpen(false);
    },
    // 表格恢复
    handleTableRegain(index, row) {
      var _this = this;
      var params = {
        id: row.id,
        status: "normal",
      };
      _this.loading_start("table");
      this;
      apiProductUpdatePart(params).then((response) => {
        _this.loading_end("table");
        this;
        _this.loadTableData();
      });
    },
    // 表格删除
    handleTableDelete(index, row) {
      const _this = this;

      this.$confirm("此操作将删除该黑名单记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          _this.loading_start("table");
          this;
          apiBlacklistDelete({
            id: row.id,
          }).then((response) => {
            this.$message({
              message: response.msg,
              type: "success",
            });
            _this.loading_end("table");
            this;
            _this.loadTableData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 数量改变
    handleTableSizeChange(val) {
      this.tableParams.size = val;
      this.loadTableData();
    },
    // 页数改变
    handleTableCurrentChange(val) {
      this.tableParams.page = val;
      this.loadTableData();
      // console.log(`当前页: ${val}`);
    },
    // 打开表单
    handleDialogFormOpen(is_init = true) {
      if (is_init) {
        this.initForm();
      }
      this.dialogFormVisible = true;
    },
    // 关闭表单
    handleDialogFormClose() {
      this.initForm();
      this.dialogFormVisible = false;
    },
    // 表单提交
    handleFormSubmit() {
      const _this = this;
      _this.loading_start("table");
      this;
      apiBlacklistCreate(this.form)
        .then((response) => {
          const result = response;
          _this.loading_end("table");
          this;
          _this.loadTableData();
          _this.handleDialogFormClose();
          _this.form = _this.init_form;
        })
        .catch(function (result) {
          _this.loading_end("table");
          this;
        });
    },
    // 加载开始...
    loading_start(keys) {
      if (Array.isArray(keys)) {
        keys.forEach((key) => {
          this.loading[key] = true;
          setTimeout(() => {
            this.loading[key] = false;
          }, 5000);
        });
      } else {
        this.loading[keys] = true;
        setTimeout(() => {
          this.loading[keys] = false;
        }, 5000);
      }
    },
    // 加载结束...
    loading_end(keys) {
      if (Array.isArray(keys)) {
        keys.forEach((key) => {
          this.loading[key] = false;
        });
      } else {
        this.loading[keys] = false;
      }
    },
  },
};
</script>

<style lang="scss"></style>
